<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/head.css">
    <link rel="stylesheet" href="../css/foot.css">
    <link rel="stylesheet" href="../css/main.css">
    <link rel="stylesheet" href="../css/liebiao.css">
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <script src="../js/lunbo.js"></script>
    <style>
        .wrapper {
            width: 1000px;
            margin: 0 auto;
            float: right;
            position: relative;
        }
        
        .caption h4 {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 13px;
            margin: 0;
            color: inherit;
        }
        
        .btn-success {
            background: red;
            float: right;
            margin-bottom: 10px;
        }
        
        .thumbnail {
            width: 330px;
            height: 600px;
            /* background: cyan; */
        }
        
        .thumbnail img:nth-of-type(1) {
            width: 330px;
            height: 460px;
        }
        
        .thumbnail img:nth-of-type(2) {
            display: inline-block;
        }
        
        .caption p {
            padding: 0;
            line-height: 30px;
        }
        
        .caption p span {
            color: #00174f;
        }
    </style>


</head>

<body>

    <!-- 头部固定区域 -->
    <header>
        <div id="h_con">
            <div class="top_nav">
                <ul>
                    <li>
                        <a href="html/login.html">注册</a>
                    </li>
                    <li>
                        <a href="html/login.html" class="border_r">登录</a>
                    </li>
                    <li>
                        <a href="" class="border_r">我的账户</a>
                        <div class="zhanghu_erji">
                            <p>
                                <a href="">我的订单</a>
                            </p>
                            <p>
                                <a href="">我的优惠券</a>
                            </p>
                        </div>

                    </li>
                    <li>
                        <a href="" class="border_r">客服中心</a>
                        <div class="kefu_erji">
                            <p>
                                <a href="">企业团购</a>
                            </p>
                            <p>
                                <a href="">退换货政策</a>
                            </p>
                            <p>
                                <a href="">在线客服</a>
                            </p>
                            <p>
                                <a href="">订购热线</a>
                            </p>
                            <p>
                                <a href="">400-1985-00</a>
                            </p>
                        </div>
                    </li>
                    <li>
                        <a href="">订单查询</a>
                    </li>
                </ul>
            </div>
            <div class="center_nav">
                <div class="login">
                    <a href="">
                        <img src="../images/logo_03.jpg" alt="">
                    </a>
                </div>
                <div class="sousuo">
                    <a href="">
                        <span>
                            <i></i>
                            搜索
                        </span>
                    </a>
                </div>
                <div class="gouwuche">
                    <a href="">
                        <p>
                            <i></i> 购物车
                            <span>
                                0
                            </span>
                        </p>
                    </a>
                </div>
            </div>
        </div>
    </header>
    <!-- 导航栏部分 -->
    <div id="nav">
        <ul class="navcon same">
            <li><a href="">首页</a></li>
            <li>
                <a href="">春秋新品</a>
                <div class="erji erji_chunqiu">
                    <dl>
                        <dt><a href="javascript:;">男士新品</a></dt>

                        <dd><a href="javascript:;">T恤</a></dd>
                        <dd><a href="javascript:;">Polo衫</a></dd>
                        <dd><a href="javascript:;">衬衫</a></dd>
                        <dd><a href="javascript:;">外套</a></dd>
                        <dd><a href="javascript:;">卫衣</a></dd>
                        <dd><a href="javascript:;">针织衫</a></dd>
                        <dd><a href="javascript:;">裤装</a></dd>
                        <dd><a href="javascript:;">配饰</a></dd>
                    </dl>

                    <dl>
                        <dt><a href="javascript:;">女士新品</a></dt>

                        <dd><a href="javascript:;">T恤</a></dd>
                        <dd><a href="javascript:;">Polo衫</a></dd>
                        <dd><a href="javascript:;">衬衫</a></dd>
                        <dd><a href="javascript:;">裙装</a></dd>
                        <dd><a href="javascript:;">外套</a></dd>
                        <dd><a href="javascript:;">卫衣</a></dd>
                        <dd><a href="javascript:;">针织衫</a></dd>
                        <dd><a href="javascript:;">裤装</a></dd>
                        <dd><a href="javascript:;">配饰</a></dd>
                    </dl>

                    <div class="erji_img">
                        <img src="../images/1 (1).jpg" alt="">
                    </div>
                </div>
            </li>
            <li><a href="">主体系列</a>
                <div class="erji erji_zhuti">
                    <dl>
                        <dt><a href="javascript:;">特殊系列</a></dt>

                        <dd><a href="javascript:;">粉彩夏日 胶囊系列</a></dd>
                        <dd><a href="javascript:;">艺术家联名系列</a></dd>
                        <dd><a href="javascript:;">520胶囊系列</a></dd>
                        <dd><a href="javascript:;">朴宰范同款</a></dd>
                        <dd><a href="javascript:;">ONE PLANET系列</a></dd>
                        <dd><a href="javascript:;">LUV THE WORLD系列</a></dd>
                        <dd><a href="javascript:;">ABOUTU系列</a></dd>
                    </dl>
                    <div class="erji_img">
                        <img src="../images/1 (2).jpg" alt="">
                    </div>
                </div>
            </li>
            <li><a href="">Tommy Hilfiger</a>
                <div class="erji erji_hil">
                    <dl>
                        <dt><a href="javascript:;">男士</a></dt>

                        <dd><a href="javascript:;">T恤</a></dd>
                        <dd><a href="javascript:;">Polo衫</a></dd>
                        <dd><a href="javascript:;">衬衫</a></dd>
                        <dd><a href="javascript:;">外套</a></dd>
                        <dd><a href="javascript:;">卫衣</a></dd>
                        <dd><a href="javascript:;">针织衫</a></dd>
                        <dd><a href="javascript:;">裤装</a></dd>
                    </dl>

                    <dl>
                        <dt><a href="javascript:;">女士新品</a></dt>

                        <dd><a href="javascript:;">T恤</a></dd>
                        <dd><a href="javascript:;">Polo衫</a></dd>
                        <dd><a href="javascript:;">衬衫</a></dd>
                        <dd><a href="javascript:;">裙装</a></dd>
                        <dd><a href="javascript:;">外套</a></dd>
                        <dd><a href="javascript:;">卫衣</a></dd>
                        <dd><a href="javascript:;">针织衫</a></dd>
                        <dd><a href="javascript:;">裤装</a></dd>
                    </dl>

                    <div class="erji_img">
                        <img src="../images/1 (3).jpg" alt="">
                    </div>
                </div>
            </li>
            <li><a href="">Tommy Jeans</a>.
                <div class="erji erji_jeans">
                    <dl>
                        <dt><a href="javascript:;">男士</a></dt>

                        <dd><a href="javascript:;">T恤</a></dd>
                        <dd><a href="javascript:;">Polo衫</a></dd>
                        <dd><a href="javascript:;">衬衫</a></dd>
                        <dd><a href="javascript:;">外套</a></dd>
                        <dd><a href="javascript:;">卫衣</a></dd>
                        <dd><a href="javascript:;">针织衫</a></dd>
                        <dd><a href="javascript:;">裤装</a></dd>
                    </dl>

                    <dl>
                        <dt><a href="javascript:;">女士新品</a></dt>

                        <dd><a href="javascript:;">T恤</a></dd>
                        <dd><a href="javascript:;">Polo衫</a></dd>
                        <dd><a href="javascript:;">衬衫</a></dd>
                        <dd><a href="javascript:;">裙装</a></dd>
                        <dd><a href="javascript:;">外套</a></dd>
                        <dd><a href="javascript:;">卫衣</a></dd>
                        <dd><a href="javascript:;">针织衫</a></dd>
                        <dd><a href="javascript:;">裤装</a></dd>
                    </dl>

                    <div class="erji_img">
                        <img src="../images/1 (4).jpg" alt="">
                    </div>
                </div>
            </li>
            <li><a href="">男装</a>
                <div class="erji erji_nanzhuang">
                    <dl>
                        <dt><a href="javascript:;">男士</a></dt>

                        <dd><a href="javascript:;">T恤</a></dd>
                        <dd><a href="javascript:;">Polo衫</a></dd>
                        <dd><a href="javascript:;">衬衫</a></dd>
                        <dd><a href="javascript:;">外套</a></dd>
                        <dd><a href="javascript:;">卫衣</a></dd>
                        <dd><a href="javascript:;">针织衫</a></dd>
                        <dd><a href="javascript:;">裤装</a></dd>
                    </dl>
                    <div class="erji_img">
                        <img src="../images/1 (5).jpg" alt="">
                    </div>
                </div>
            </li>
            <li><a href="">女装</a>
                <div class="erji erji_nvzhuang">
                    <dl>
                        <dt><a href="javascript:;">女士新品</a></dt>

                        <dd><a href="javascript:;">T恤</a></dd>
                        <dd><a href="javascript:;">Polo衫</a></dd>
                        <dd><a href="javascript:;">衬衫</a></dd>
                        <dd><a href="javascript:;">裙装</a></dd>
                        <dd><a href="javascript:;">外套</a></dd>
                        <dd><a href="javascript:;">卫衣</a></dd>
                        <dd><a href="javascript:;">针织衫</a></dd>
                        <dd><a href="javascript:;">裤装</a></dd>
                    </dl>
                    <div class="erji_img">
                        <img src="../images/1 (6).jpg" alt="">
                    </div>
                </div>
            </li>
            <li><a href="">童装</a>
                <div class="erji erji_tongzhuang">
                    <dl>
                        <dt>全部男童</dt>
                        <dt>上装</dt>
                        <dt>下装</dt>
                    </dl>
                    <dl>
                        <dt>全部女童</dt>
                        <dt>上装</dt>
                        <dt>下装</dt>
                    </dl>
                    <div class="erji_img">
                        <img src="../images/1 (7).jpg" alt="">
                    </div>
                </div>
            </li>
            <li><a href="">配饰</a>
                <div class="erji erji_peishi">
                    <dl>
                        <dt><a href="javascript:;">男士配件</a></dt>

                        <dd><a href="javascript:;">包袋</a></dd>
                        <dd><a href="javascript:;">手表</a></dd>
                        <dd><a href="javascript:;">鞋子</a></dd>
                        <dd><a href="javascript:;">腰带</a></dd>
                        <dd><a href="javascript:;">帽子</a></dd>
                        <dd><a href="javascript:;">内衣</a></dd>
                        <dd><a href="javascript:;">家居服</a></dd>
                        <dd><a href="javascript:;">袜子</a></dd>
                    </dl>

                    <dl>
                        <dt><a href="javascript:;">女士配件</a></dt>

                        <dd><a href="javascript:;">包袋</a></dd>
                        <dd><a href="javascript:;">手表</a></dd>
                        <dd><a href="javascript:;">鞋子</a></dd>
                        <dd><a href="javascript:;">腰带</a></dd>
                        <dd><a href="javascript:;">帽子</a></dd>
                        <dd><a href="javascript:;">内衣</a></dd>
                        <dd><a href="javascript:;">家居服</a></dd>
                        <dd><a href="javascript:;">袜子</a></dd>

                    </dl>

                    <div class="erji_img">
                        <img src="../images/1 (8).jpg" alt="">
                    </div>
                </div>
            </li>
            <li><a href="">SALE</a>
                <div class="erji erji_sale">
                    <dl>
                        <dt><a href="javascript:;">全部男装</a></dt>

                        <dd><a href="javascript:;">6折专区</a></dd>
                        <dd><a href="javascript:;">7折专区</a></dd>
                        <dd><a href="javascript:;">8折专区</a></dd>
                        <dd><a href="javascript:;">9折专区</a></dd>

                    </dl>

                    <dl>
                        <dt><a href="javascript:;">全部女装</a></dt>

                        <dd><a href="javascript:;">5折专区</a></dd>
                        <dd><a href="javascript:;">6折专区</a></dd>
                        <dd><a href="javascript:;">7折专区</a></dd>
                        <dd><a href="javascript:;">8折专区</a></dd>
                        <dd><a href="javascript:;">9折专区</a></dd>

                    </dl>

                    <div class="erji_img">
                        <img src="../images/1 (9).jpg" alt="">
                    </div>
                </div>
            </li>
            <li><a href="">附近门店</a></li>
        </ul>
    </div>
    <!-- ----------春秋新品----------- -->
    <div id="chunqiu">
        <div id="cq_con" class="same">
            <div class="cq_sy same">
                <p>
                    <a href="">首页 > </a>
                    <a href="">春秋新品</a>
                </p>
            </div>
            <h2 class="cq_h2">春秋新品</h2>
            <div id="cq_l">
                <div id="cq_a">
                    <div class="title">
                        筛选<span>(0)</span>
                    </div>
                    <div class="queren">确认</div>
                    <h3>性别
                        <span></span>
                    </h3>
                    <h3>价格
                        <span></span>
                    </h3>
                    <h3>尺码
                        <span></span>
                    </h3>
                    <h3>系列
                        <span></span>
                    </h3>

                </div>

                <dl class="cq_b">
                    <dt><a href="javascript:;">女士新品</a></dt>
                    <dd><a href="javascript:;">T恤</a></dd>
                    <dd><a href="javascript:;">POLO衫</a></dd>
                    <dd><a href="javascript:;">衬衫</a></dd>
                    <dd><a href="javascript:;">裙装</a></dd>
                    <dd><a href="javascript:;">外套</a></dd>
                    <dd><a href="javascript:;">卫衣</a></dd>
                    <dd><a href="javascript:;">针织衫</a></dd>
                    <dd><a href="javascript:;">外套</a></dd>
                    <dd><a href="javascript:;">裙装</a></dd>
                    <dd><a href="javascript:;">装饰</a></dd>
                </dl>
                <dl class="cq_c">
                    <dt><a href="javascript:;">男士新品</a></dt>
                    <dd><a href="javascript:;">T恤</a></dd>
                    <dd><a href="javascript:;">POLO衫</a></dd>
                    <dd><a href="javascript:;">衬衫</a></dd>

                    <dd><a href="javascript:;">外套</a></dd>
                    <dd><a href="javascript:;">卫衣</a></dd>
                    <dd><a href="javascript:;">针织衫</a></dd>
                    <dd><a href="javascript:;">外套</a></dd>

                </dl>
            </div>
            <div id="cq_r">
                <div class="wrapper">
                    <div class="row">


                        <!-- <div class="col-sm-6 col-md-4">
                        <div class="thumbnail">
                            <img src="..." alt="...">
                            <div class="caption">
                                <h3>Thumbnail label</h3>
                                <p>...</p>
                                <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#"
                                        class="btn btn-default" role="button">Button</a></p>
                            </div>
                        </div>
                    </div> -->
                    </div>
                    <div class="page">

                    </div>
                </div>
            </div>
            <script src="../js/ajax.js"></script>
            <script src="../js/pagination.js"></script>
            <script>
                var oRow = document.querySelector('.row')
                var oPage = document.querySelector('.page')

                // 存到数组里面
                let shopArr = JSON.parse(localStorage.getItem('shopArr')) || []

                function getData(n) {
                    oRow.innerHTML = ''
                    ajax({
                        url: '../php/list.php',
                        data: {
                            pagenum: n,
                            totalpage: 12
                        },
                        success(res) {
                            // console.log(res)
                            let obj = JSON.parse(res)


                            obj.data.forEach(ele => {
                                let str = ` <div class="col-sm-6 col-md-4">
                                    <div class="thumbnail">
                                        <img src="${ele.goods_small_logo}" alt="...">
                                       <img src="../images/PDP-PC-th.png" alt="">
                                        <div class="caption">
                                            <h4>Tommy ${ele.goods_name}</h4>
                                            <p><span>￥ ${ele.goods_number}.00 </span> </p>
                                            <p>
                                               
                                                <a goodsId="${ele.goods_id}" href="javascript:;"
                                                    class="btn btn-success" role="button">加入购物车</a></p>
                                        </div>
                                    </div>
                                </div>`

                                oRow.innerHTML += str
                            })

                            // 放到forEach后面！！！
                            // - 先生成标签，然后获取标签
                            let add = document.querySelectorAll('.btn-success')

                            // console.log(add)

                            add.forEach((ele, index) => {
                                ele.onclick = function() {
                                    // 存什么？？？
                                    // console.log(obj.data[index])

                                    // 取id
                                    let id = obj.data[index].goods_id
                                    let flag = true

                                    shopArr.forEach(ele => {
                                        if (ele.goods_id === id) {
                                            // 能进入条件肯定已经存上了
                                            // 下面不能再继续存储并且数量加1
                                            flag = false
                                            ele.count++
                                        }
                                    })

                                    if (flag) {
                                        shopArr.push({
                                            count: 1,
                                            ...obj.data[index]
                                        })
                                    }
                                    // 把数组存到本地
                                    // console.log(shopArr)
                                    localStorage.setItem('shopArr', JSON.stringify(shopArr))
                                }
                            })
                        }
                    })
                }

                new Pagination(oPage, {
                    pageInfo: {
                        pagenum: 1, // 当前页数
                        pagesize: 10, // 每页多少条
                        total: 1000, // 数据总数
                        totalpage: 100 // 页码总数
                    },
                    change(n) {
                        getData(n)
                    }
                })
            </script>
        </div>
    </div>




    <!-- 立即注册 -->
    <div id="join">
        <div class="join-club same">
            <div class="join-club-content">
                <div class="join-club-title">

                    加入MY TOMMY会员俱乐部
                </div>
                <div class="join-club-main">
                    <p>注册即可加入MY TOMMY会员俱乐部，立赠200元礼券。</p>
                    <p>消费满额可升级VIP会员，尊享更多优惠，
                        <a class="check-vip-terms" href="/newActivity/VIPSS21">查看VIP机制与权益</a>
                    </p>
                </div>
            </div>
            <div class="join-club-handel">
                <button class="regist-now register-button">立即注册</button>
                <div class="login-button-wrapper">
                    <div class="login-now login-button">已有账号，立即登录</div>
                </div>
            </div>
        </div>

    </div>
    <!-- 尾部尾部 -->
    <div class="pc-footer-content">
        <div class="pc-footer-main same">
            <div class="pc-footer-logo">
                <img src="images/logo_03.jpg" alt="">
            </div>
            <div class="pc-footer-links">
                <div class="pc-footer-link">
                    <div class="link-title--footer">
                        产品探索
                    </div>
                    <ul class="link-detail">
                        <li class="link__item"> <a href="">当季新品</a> </li>
                        <li class="link__item"> <a href="">产品系列</a> </li>
                        <li class="link__item"> <a href="">主题系列</a> </li>
                        <li class="link__item"> <a href="">男装</a> </li>
                        <li class="link__item"> <a href="">女装</a> </li>
                        <li class="link__item"> <a href="">童装</a> </li>
                        <li class="link__item"> <a href="">配件</a> </li>
                    </ul>
                </div>
                <div class="pc-footer-link">
                    <div class="link-title--footer">
                        客户服务
                    </div>
                    <ul class="link-detail">
                        <li class="link__item"> <a href="">订单查询</a> </li>
                        <li class="link__item"> <a href="">配送方式及时间</a> </li>
                        <li class="link__item"> <a href="">退换货政策</a> </li>
                        <li class="link__item"> <a href="">尺码指导</a> </li>
                        <li class="link__item"> <a href="">会员机制与权益</a> </li>
                        <li class="link__item"> <a href="">企业团购</a> </li>
                        <li class="link__item"> <a href="">隐私政策</a> </li>
                        <li class="link__item"> <a href="">门店自提/预约/代退货</a> </li>
                    </ul>
                </div>
                <div class="pc-footer-link">
                    <div class="link-title--footer">
                        关于我们
                    </div>
                    <ul class="link-detail">
                        <li class="link__item"> <a href="">品牌故事</a> </li>
                        <li class="link__item"> <a href="">附近门店</a> </li>
                        <li class="link__item">
                            <a href=" target=" _blank ">新浪微博</a> </li>
                        <li class=" link__item "> <a href=" ">假冒产品</a> </li>
                    </ul>
                </div>
                <div class=" pc-footer-link ">
                    <div class=" link-title--footer ">
                        联系我们
                    </div>
                    <ul class=" link-detail ">
                        <li class=" link__item footer-customer-service ">
                            <div class=" customer-service-text ">
                                在线客服（9:00-22:00）
                            </div>
                        </li>
                        <li class=" link__item ">客服电话（400-019-8500）</li>
                        <li class=" link__item "> <a href=" ">发送Email</a> </li>
                    </ul>
                </div>
                <div class=" contact ">
                    <!-- <div class=" qrcode " style=" display: none; ">
                        <img src=" " alt=" ">
                    </div>
                    <div class=" smallprogram "  style=" display: none; ">
                        <img src=" " alt=" ">
                    </div> -->
                    <div class=" contact-detail ">
                        <div class=" contact-title ">
                            关注我们
                        </div>
                        <div class=" contact-type ">
                            <img class=" smallprogram_wechat " src=" " alt=" ">
                            <img class=" wechat " src=" " alt=" ">
                            <a href=" " target=" _blank "> <img src=" " alt=" "> </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class=" copyright same ">
            <div>
                客服服务时间为：9:00至22:00（全年无休，法定节日除外）
            </div>
            <div class=" links " style=" margin-left: -260px; ">
                <a target=" _blank " href=" " class=" record ">沪ICP备12000910号</a>
            </div>
            <div class=" links ">
                <a target=" _blank " 
                    class=" industrial ">上海工商</a>
            </div>
        </div>
    </div>





</body>

</html>